<script setup>

import { ref,onMounted } from 'vue';
import { ElMessage,ElMessageBox  } from 'element-plus';
import { queryAllDept,addDeptApi,queryByIdApi,updateApi,deleteByIdApi } from '@/api/dept'; 

//钩子函数
onMounted(()=>{
  search();
});

//查询
const search= async ()=>{
  const result= await queryAllDept();
  if(result.code){
    deptList.value=result.data;
  }
}


const deptList =ref([]);


const dialogFormVisible=ref(false);
const dept=ref({name:''});
const formtitle=ref('');
const save= async ()=>{
  //表单校验
  if(!deptFormref.value) 
    return ;
  deptFormref.value.validate( async (valid)=>{
    if(valid){//校验通过
        let result;
        if(dept.value.id){
          result= await updateApi(dept.value);//编辑
        }else{
          result= await addDeptApi(dept.value);//新增
        }
        if(result.code){
          ElMessage.success(result.msg);
          dialogFormVisible.value=false;
          search();
        }else{
          ElMessage.error(result.msg);
        }
    }else{//校验不通过
        ElMessage.error("请输入有效的部门名称!");
    }
  })//校验
};
const addDept=()=>{
  dialogFormVisible.value=true;
  formtitle.value="新增部门";
  dept.value={name:''};
  if(deptFormref.value){
    deptFormref.value.resetFields();
  }
};

const rules=ref({
  name: [
    { required: true, message: '请输入部门名称!', trigger: 'blur' },
    { min: 2, max: 10, message: '部门名称长度应该在2-10位', trigger: 'blur' }
  ]
})

const deptFormref=ref();

//编辑
const Edit= async (id)=>{
  formtitle.value="编辑部门";
  if(deptFormref.value){
    deptFormref.value.resetFields();
  }
  const result= await queryByIdApi(id);
  if(result.code){
    dialogFormVisible.value=true;
    dept.value=result.data;
  }
};

//删除部门
const deleteById= async (id)=>{
  ElMessageBox.confirm(
    '你真的要删除吗?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then( async () => {
      const result= await deleteByIdApi(id);
      if(result.code){
        ElMessage.success("删除成功");
        search();
      }else{
        ElMessage.error("删除失败,"+result.msg);
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
};
</script>

<template>
  <h1>部门管理</h1>
  <div class="container">
    <el-button type="success" v-on:click="addDept"> + 新增部门</el-button>
  </div>

  <div class="container">
    <el-table :data="deptList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="name" label="部门名称" width="120" align="center"/>
      <el-table-column prop="updateTime" label="最新操作时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="Edit(scope.row.id)"><el-icon><EditPen /></el-icon>编辑</el-button>
          <el-button type="danger" size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- dialog对话框 -->
  <el-dialog v-model="dialogFormVisible" v-bind:title="formtitle" width="500">
    <el-form :model="dept" :rules="rules" ref="deptFormref">
      <el-form-item label="部门名称" label-width="90px" prop="name">
        <el-input v-model="dept.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
  .container{
    margin: 20px 10px;
  }
</style>
